<template>
  <el-card class="person">
    <div class="avatar">
		<div><img :src="imgDataUrl" class="my_img"></div>
		<el-button type="primary" @click="toggleShow" class="upload_btn">
			更换头像<i class="el-icon-upload el-icon--right"></i>
		</el-button>
		<my-upload field="img"
				   @crop-success="cropSuccess"
				   @crop-upload-success="cropUploadSuccess"
				   @crop-upload-fail="cropUploadFail"
				   v-model="show"
				   method="POST"
				   :width="300"
				   :height="300"
				   :url="domain + '/user/uploadUserAvatar'"
				   :params="params"
				   :headers="headers"
		></my-upload>
	</div>
	<div class="info">
		<h1>欢迎 {{userInfo.nickName}} </h1>
		<div class="person_content">
			<p><span>用户ID：</span> {{userInfo.uuid}}</p>
			<p><span>用户名：</span> {{userInfo.userName}}</p>
			<p><span>用户角色：</span> {{userInfo.authority.authorityName}}</p>
		</div>
	</div>
  </el-card>
</template>
<script>
import myUpload from 'vue-image-crop-upload';
import 'babel-polyfill'
import { mapGetters} from 'vuex'
const path = process.env.VUE_APP_BASE_API
export default {
  name: 'Person',
  // inject:['reload'],
  data(){
    return {
		show: false,
		path:path,
		params: {name: 'avatar', user_id: ''},
		headers: {'x-token': ''}
    }
  },
  components:{
	  'my-upload': myUpload,
  },
  created() {
	  this.imgDataUrl = this.domain + this.userInfo.headerImg
	  this.params.user_id = this.userInfo.ID;
	  this.headers = {'x-token': this.token};
	},
  computed: {
    ...mapGetters('user', ['userInfo', 'token'])
  },
  methods:{
	toggleShow() {
	  this.show = !this.show;
	},
	cropSuccess(imgDataUrl, field) {
		console.log('裁剪成功');
	},
	cropUploadSuccess(data, field) {
	 this.$message.success("上传成功");
	  this.$router.go(0);
	  // this.imgDataUrl = this.domain + data.data.img_path;
	  // this.show = false
	},
	cropUploadFail(status, field) {
	  this.$message.error("上传失败");
	},
  }
}
</script>
<style lang="scss">
.person {
        width: 100%;
        min-height: 400px;
        margin-top: 5%;
    }

.avatar {
	float: left;
	width: 40%;
	height: 100%;
}

.my_img {
	width: 300px;
	height: 300px;
	margin-left: 57px;
	border: 1px solid #fff;
	border-radius: 50%;
}

.upload_btn {
	margin-top: 10px;
	margin-left: 158px;
}

.info {
	width: 500px;
	height: 300px;
	border: 1px solid #fff;
	font-size: 18px;
	margin-top: -20px;
	float: right;
	h1{
	  font-size: 36px;
	};
	span{
		font-weight: bolder;
		font-size: 20px;
		color: dodgerblue;
	}
}
.person_content{
	margin-top: 50px;
	p{
		line-height: 30px;
	}
}
</style>